<template>
	<view class="password-centent">
		<view v-if="type == 0">
			<view class="phone-view">
				<u-field v-model="phone" maxlength="11" label="手机号码" placeholder="请填写手机号"></u-field>
			</view>
			<u-message-input font-size="40" width="60" :maxlength="6" :focus="true" :breathe="true" @finish="finish"></u-message-input>
			<view class="edit-btn">
				<u-button :ripple="true" @click="setPassword" size="medium" :custom-style="customStyle2" throttle-time="1000">确认</u-button>
			</view>
		</view>
		
		<view v-else>
				<view class="list-view">
					<u-field v-model="phone" maxlength="11" label="手机号码" placeholder="请填写手机号"></u-field>
				</view>
				<view class="list-view">
					<u-field v-model="code" label="验证码" placeholder="请填写验证码">
						<u-button size="mini" slot="right" :custom-style="customStyle2" @click="getCode">{{codeText}}</u-button>
					</u-field>
					<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
				</view>
				<view style="display: flex;">
					<view style="line-height: 80rpx;padding-left: 28rpx;width: 156rpx;">新密码</view>
					<u-message-input font-size="40" width="60" :maxlength="6" :focus="true" :breathe="true" @finish="finish"></u-message-input>
				</view>
				<view style="display: flex;">
					<view style="line-height: 80rpx;padding-left: 28rpx;width: 156rpx;">确认密码</view>
					<u-message-input font-size="40" width="60" :maxlength="6" :focus="false" :breathe="true" @finish="confirmPrivatKey"></u-message-input>
				</view>
				
				<view class="edit-btn">
					<u-button :ripple="true" @click="editPassword" size="medium" :custom-style="customStyle2" throttle-time="1000">确认</u-button>
				</view>
		</view>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				phone: '',
				code: '',
				privat_key: '',
				confirm_privat_key: '',
				customStyle2: {
					borderColor: '#141414', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#fff',
					background: '#141414'
				},
				codeText: '获取验证码',
			};
		},
		onLoad(option) {
			this.type = option.type
			console.log(option)
		},
		methods: {
			setPassword() {
				if (this.phone == '') {
					uni.showToast({
						title: '请认真填写手机号码',
						icon: "none",
						duration: 1000,
						mask: true
					})
					return
				}
				if (this.privat_key == '') {
					uni.showToast({
						title: '请认真填写密码',
						icon: "none",
						duration: 1000,
						mask: true
					})
					return
				}
				let data = {
					privat_key: this.privat_key,
					phone: this.phone
				}
				this.$u.apiWei.UpPrivateKey(data).then(res => {
					uni.showToast({
						title: res.datas,
						icon: "none",
						success: () => {
							setTimeout(() => {
								uni.navigateBack()
							},1500)
						}
					})
				})
			},
			editPassword(){
				if(this.privat_key != this.confirm_privat_key){
					uni.showToast({
						title: '输入的密码不对应，请重新输入',
						icon: "none",
						duration: 1000,
						mask: true
					})
					return
				}
				if(this.code == ''){
					uni.showToast({
						title: '请输入验证码',
						icon: "none",
						duration: 1000,
						mask: true
					})
					return
				}
				
				let data = {
					privat_key: this.privat_key,
					confirm_privat_key: this.confirm_privat_key,
					phone: this.phone,
					code:this.code
				}
				this.$u.apiWei.UpWalletPsd(data).then(res => {
					uni.showToast({
						title: res.datas,
						icon: "none",
						success: () => {
							setTimeout(() => {
								uni.navigateBack()
							},1500)
						}
					})
				})
			},
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$u.apiWei.PhoneGetCode({
						login_code:'login',
						phone: this.phone
					}).then(res => {
						uni.hideLoading();
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					});
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			finish(e) {
				this.privat_key = e
			},
			confirmPrivatKey(e) {
				this.confirm_privat_key = e
			},
		}
	}
</script>

<style lang="scss">
	.password-centent {
		padding: 60rpx 0 0 0;
		width: 100%;
		.list-view{
			padding-right: 90rpx;
		}

		.phone-view {
			padding: 20rpx 140rpx;
		}

		.title {
			padding: 20rpx 0;
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
		}

		.edit-btn {
			margin-top: 40rpx;
			display: flex;
			justify-content: center;
		}
	}
</style>
